
import { handleError } from 'vue';
<template>
  <div v-size-ob="handelSizeChange" class="scroll-container">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>

import { reactive } from "vue";
import { defineComponent, ref } from "vue";

/**
 * 设计
 *  1 外层 scroll-container 始终是横向的
 *  2 中层 v-scroll 开始时竖着的
 *  3 内层 内容 content 开始是横着的
 *  4 先把 内层 以左上角为原点 顺时针90度旋转到 中层 v-scroll 的位置
 *  5 再把 中层v-scroll 逆时针旋转回 外层scroll-container位置
 *  6 至此就实现了纵向操作 使 横向滚动
 *  7 注意还得 中层逆时针旋转后会跑到屏幕上面的位置注意得设定其top+高度 删掉滚动条
 */

// 响应式数据
const s = reactive({
  w: 0,
  h: 0,
});

// 自定义指令触发的时候执行此函数
function handelSizeChange({w, h}) {
  s.w = w;
  s.h = h;
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  height: 100%;
}

/* v-bind 是vue3中的一个特性，其可拿data中的数据 */
.scroll-container .v-scroll {
  --w: calc(v-bind("s.w") * 1px);
  --h: calc(v-bind("s.h") * 1px);
  width: var(--h);
  height: var(--w);
  background: transparent;
  overflow: auto;
  position: relative;
  transform-origin: left top;
  transform: rotate(-90deg);
  top: var(--h);
}

/* 隐藏滚动条 */
.scroll-container .v-scroll::-webkit-scrollbar {
  display: none;
}

.scroll-container .content {
    background: transparent;
    height: fit-content;
    position: absolute;
    top: 0;
    left: var(--h);
    transform-origin: left top;
    transform: rotate(90deg);
}
</style>